<template>
  <div class="settings-page">
    <!-- 1. 美化后的沉浸式顶部 -->
    <header class="profile-header">
      <div class="header-content">
        <div class="user-avatar">
          <span>{{ familyUser.fullName?.charAt(0) }}</span>
        </div>
        <div class="user-info">
          <h2 class="user-name">{{ familyUser.fullName }}</h2>
          <p class="user-phone">绑定手机: {{ maskedPhone }}</p>
        </div>
      </div>
    </header>

    <main class="settings-content">
      <!-- 2. 卡片式功能列表 -->
      <div class="setting-card" @click="navigateTo('/settings/notification')">
        <van-icon name="bell" class="card-icon" color="#3498db" />
        <span class="card-text">通知设置</span>
        <van-icon name="arrow" class="arrow-icon" />
      </div>

      <div class="setting-card" @click="navigateTo('/settings/help')">
        <van-icon name="question-o" class="card-icon" color="#2ecc71" />
        <span class="card-text">帮助中心</span>
        <van-icon name="arrow" class="arrow-icon" />
      </div>

      <div class="setting-card" @click="navigateTo('/feedback/new')">
        <van-icon name="chat-o" class="card-icon" color="#f39c12" />
        <span class="card-text">意见与反馈</span>
        <van-icon name="arrow" class="arrow-icon" />
      </div>

      <!-- 3. 退出登录按钮 -->
      <div class="logout-wrapper">
        <van-button 
          color="linear-gradient(to right, #ff6034, #ee0a24)" 
          round 
          block 
          @click="handleLogout"
        >
          退出登录
        </van-button>
      </div>
    </main>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { useRouter } from 'vue-router';
import { showConfirmDialog, showToast } from 'vant';
import 'vant/es/dialog/style';

const router = useRouter();

// --- 静态模拟数据 (来自数据库的 family_profiles 和 users 表) ---
const familyUser = ref({
  fullName: '王女士',
  phoneNumber: '13812345678',
});

// --- 计算属性 ---
const maskedPhone = computed(() => {
  const phone = familyUser.value.phoneNumber;
  if (!phone) return '';
  return `${phone.slice(0, 3)}****${phone.slice(-4)}`;
});

// --- 方法 ---

const navigateTo = (path) => {
  router.push(path);
};

const handleLogout = () => {
  showConfirmDialog({
    title: '退出登录',
    message: '您确定要退出当前账号吗？',
    theme: 'round-button',
  })
  .then(() => {
    // 模拟退出操作
    showToast({ type: 'loading', message: '正在退出...', duration: 1000, forbidClick: true });
    setTimeout(() => {
      router.replace('/login'); // 使用 replace 避免用户可以返回到设置页
    }, 1000);
  })
  .catch(() => {});
};
</script>

<style scoped>
.settings-page {
  background-color: #f7f8fa;
  min-height: 100vh;
}

/* 1. 沉浸式顶部 */
.profile-header {
  padding: 40px 20px 30px;
  background: linear-gradient(135deg, #eef2ff 0%, #d5e1ff 100%);
}
.header-content {
  display: flex;
  align-items: center;
}
.user-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background-color: #3a7afe;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 32px;
  font-weight: bold;
  flex-shrink: 0;
  margin-right: 16px;
  box-shadow: 0 4px 10px rgba(58, 122, 254, 0.4);
}
.user-info {
  flex-grow: 1;
}
.user-name {
  font-size: 22px;
  font-weight: 500;
  color: #323233;
  margin: 0 0 8px 0;
}
.user-phone {
  font-size: 14px;
  color: #646566;
  margin: 0;
}

/* 2. 主内容与卡片式列表 */
.settings-content {
  padding: 16px;
  /* 使用负 margin 将内容区域向上移动，与头部重叠一部分 */
  margin-top: -20px; 
}
.setting-card {
  display: flex;
  align-items: center;
  background-color: #fff;
  border-radius: 12px;
  padding: 20px 16px;
  margin-bottom: 12px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
  transition: all 0.2s ease-in-out;
}
.setting-card:active {
    transform: scale(0.98);
    background-color: #f2f3f5;
}

.card-icon {
  font-size: 22px;
  margin-right: 16px;
}
.card-text {
  flex-grow: 1;
  font-size: 16px;
  color: #323233;
}
.arrow-icon {
  color: #c8c9cc;
  font-size: 16px;
}

/* 3. 退出按钮 */
.logout-wrapper {
  margin-top: 40px;
}
</style>